<template>
  <div class="ele-body">
    <!-- 数据表格 -->
    <el-card shadow="always" body-style="padding: 30px 40px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字：">
          <el-input style="width: 400px" v-model="formInline.title" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="60" label="序号">
        </el-table-column>
        <el-table-column prop="productCode" label="产品编号" width="150">
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" >
        </el-table-column>
          <el-table-column prop="categoryName" label="产品分类" width="150" align="center">
        </el-table-column>
        <el-table-column prop="productItemName" label="规格" width="250">
        </el-table-column>
        <el-table-column prop="stockQty" label="库存数量" width="90">
        </el-table-column>
        <el-table-column prop="lockQty" label="锁定数量" width="90">
        </el-table-column>
        <el-table-column prop="outStockQty" label="出库数量" width="90">
        </el-table-column>
        <el-table-column prop="usableQty" label="可用库存" width="90">
        </el-table-column>
         <el-table-column prop="unitName" label="单位" width="80" align="center">
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="onInventory(scope.row.productId, scope.row.productItemId)"
              size="small">入库明细</el-button>
            <el-button type="text" v-if="scope.row.categoryName=='原料'" @click="onOutbound(scope.row.productId, scope.row.productItemId)"
              size="small">打印原料码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="display: flex; justify-content: flex-end" background @current-change="handleCurrentChange"
        layout="total, prev, pager, next" :current-page.sync="currentPage" :total="totalNum" :page-size="10">
      </el-pagination>
    </el-card>

    <el-dialog :close-on-click-modal="false" :title="title" width="70%" :visible.sync="dialogFormVisible">
      <el-table style="width: 100%" max-height="600" :data="inventoryList" border>
        <el-table-column type="index" width="100" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="productCode" label="产品编号" width="150" align="center"></el-table-column>
        <el-table-column prop="productName" label="产品名称" width="150" align="center">
        </el-table-column>
       
        
        <el-table-column prop="productItemName" label="规格" width="150" align="center">
        </el-table-column>
        <el-table-column prop="qty" label="入库数量" width="150" align="center">
        </el-table-column>
        <el-table-column prop="costPrice" label="成本单价" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="unitName" label="单位" width="150" align="center">
        </el-table-column>
        <el-table-column prop="createDate" label="入库日期" width="150" align="center">
          <template slot-scope="scope">
            <p>{{ formatDateTime(scope.row.createDate) }}</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="display: flex; justify-content: flex-end" background @current-change="handleCurrentChange"
        layout="total, prev, pager, next" :current-page.sync="invenCurrentPage" :total="invenTotalNum" :page-size="10">
      </el-pagination>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" title="打印流水码" width="83%" :visible.sync="dialogFormVisible01">
      <div class="dialog-content">
        <div v-for="(item, index) in outboundList" :key="index" class="item">
          <img :src="item.QrCodeImg" alt="" srcset="">
          <p style="margin-top: 10px;">{{ item.productName }}-{{ item.productItemName }}({{ item.useStatusDesc }})</p>
        </div>
      </div>

      <div style="display: flex;align-items: center;justify-content: flex-end;">
        <el-button type="primary" @click="handlePrint" style="margin-right: 15px;">打 印</el-button>
        <el-button @click="dialogFormVisible01 = false" style="margin-right: 15px;">关 闭</el-button>
        <el-pagination style="display: flex; justify-content: flex-end" background
          @current-change="handleOutboundCurrentChange" layout="total, prev, pager, next"
          :current-page.sync="outboundCurrentPage" :total="outboundTotalNum" :page-size="10">
        </el-pagination>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { printThis } from 'ele-admin';
import {
  QueryStockItemByCondition,
  QueryInStockItemByCondition,
  QueryStockByCondition,
  GetGuid,
  GetBannerDetail
} from '@/api/invoicingmanager';
export default {
  name: 'Banner',
  data() {
    return {
      itemDetail: {},
      title: '',
      guid: '',
      currentPage: 1,
      totalNum: 0,
      formInline: {
        title: ''
      },
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisible01: false,
      form: {
        title: '',
        content: '',
        fileList: []
      },
      inventoryList: [],
      invenCurrentPage: 1,
      invenTotalNum: 0,
      outboundList: [],
      outboundCurrentPage: 1,
      outboundTotalNum: 0,
      productId: '',
      productItemId: ''
    };
  },
  created() {
    this.initData();
    this.getGuid();
  },
  methods: {
      formatDateTime(isoString) {
      const date = new Date(isoString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需+1
      const day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    handlePrint() {
      // printThis()
      printThis({
        horizontal: true, // 是否横向打印
        blank: false // 是否打开新页面打印
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    handleOutboundCurrentChange(val) {
      this.outboundCurrentPage = val;
      this.getOutbound(this.productId, this.productItemId);
    },
    onOutbound(productId, productItemId) {
      this.dialogFormVisible01 = true;
      this.productId = productId;
      this.productItemId = productItemId;
      this.getOutbound(productId, productItemId);
    },
    onInventory(productId, productItemId) {
      this.dialogFormVisible = true;
      this.productId = productId;
      this.productItemId = productItemId;
      this.getInventory(productId, productItemId);
    },

    handleInventoryCurrentChange(val) {
      this.invenCurrentPage = val;
      this.getInventory(this.productId, this.productItemId);
    },

    getOutbound(productId, productItemId) {
      QueryStockItemByCondition({
        pageIndex: this.outboundCurrentPage,
        pageSize: 10,
        conditions: {
          productId: productId,
          productItemId: productItemId
        },
        orderBys: [
          {
            sort: 'createDate',
            order: 1
          }
        ]
      })
        .then((res) => {
          this.outboundList = res.items;
          this.outboundTotalNum = res.totalrecords;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    getInventory(productId, productItemId) {
      QueryInStockItemByCondition({
        pageIndex: this.invenCurrentPage,
        pageSize: 10,
        conditions: {
          productId: productId,
          productItemId: productItemId
        },
        orderBys: [
          {
            sort: 'createDate',
            order: 1
          }
        ]
      })
        .then((res) => {
          this.inventoryList = res.items;
          this.invenTotalNum = res.totalrecords;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    initData() {
      QueryStockByCondition({
        pageIndex: this.currentPage,
        pageSize: 10,
        conditions: {
          keyword: this.formInline.title,
          status: 0
        },
        orderBys: [
          {
            sort: 'createDate',
            order: 0
          }
        ]
      })
        .then((res) => {
          this.tableData = res.items;
          this.invenTotalNum = res.totalrecords;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getDetail(id) {
      GetBannerDetail({
        id: id
      })
        .then((res) => {
          this.form = {
            title: res.title,
            content: res.content
          };
          this.itemDetail = res;
          this.form.fileList = [{ url: res.simgUrl }];
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    handleSearch() {
      this.currentPage = 1;
      this.initData();
    },
    handleReset() {
      this.formInline = {};
      this.currentPage = 1;
    },
    getGuid() {
      GetGuid()
        .then((res) => {
          this.guid = res;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.dialog-content {
  width: 100%;
  display: flex;
  // justify-content: space-around;
  flex-wrap: wrap;

  .item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    img {
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
    }
  }
}
</style>
